<template>
    <div class="xz-image">
        <ul>
            <li v-for="(item,index) in images" style="position: relative;;border:1px solid#E4E7ED">
              
                <el-checkbox v-model="item.selected" style="position: absolute;top:-1px;left:-1px;" v-if="checkable" @change="$emit('select',item)"></el-checkbox>
                <!-- <el-image
                :src="item.imageUrl"
                fit="contain"
                @click="toggleSelect(index)"
                > -->
                <img 
                  :src="item.imageUrl"
                  style="object-fit: contain;width: 100%;max-height: 100%"
                  @click="toggleSelect(index)"
                  />
                  

                <!-- </el-image> -->
                <i class="el-icon-close icon-label" v-if="deletable" @click="$emit('remove', item)"></i>
                
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        name:'XzImage',
        props:{
            images:Array,
            disabled:{
                type:Boolean,
                default:false
            },
           
             checkable:{
                type:Boolean,
                default:false
            },
            deletable:{
                type:Boolean,
                default:false
            },
        },
        methods: {
            toggleSelect(index){
                if(this.checkable){
                    this.images[index].selected = !this.images[index].selected
                    this.$emit('select',this.images[index])
                }
            }
        },
    }
</script>

<style scoped>
    ul{
        list-style-type: none;
        display: flex;
        width: 100%;
        flex-wrap: wrap;

    }

    ul li{
        width: 200px;
        height: 200px;
        flex-shrink: 0;
        padding:5px 5px;
        cursor: pointer;
        margin-right:0.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .xz-image /deep/ img{
        border-radius: 4px;
    }
    .icon-label{
        position: absolute;
        right: 0px;
        top: 0px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        display: block;
        color: #ffffff;
        cursor: pointer;
    }
  
</style>